import Vue from 'vue';
import { JSortTable } from './j-sortTable';

/**
 * @author jjw
 * @type {{install: draghead.install}}
 */

const draghead = {
  install: function () {
    Vue.directive('draghead', {
      inserted: function (el, binding) {
        // 获取单据表头
        const header = el.querySelector('.has-gutter').querySelector('TR');
        // 获取单据内容
        const tablebody = el.querySelector('.el-table__body-wrapper');
        // 获取Vue实例
        const example = binding.value.example;
        //添加点击事件
        const headerDom = el.querySelector('.el-table__header-wrapper')
        headerDom.addEventListener('mousedown',()=>{
          if (example.header instanceof Array) {
            example.currentHeader = example.header;
          } else if (example.header instanceof Object) {
            example.currentHeader = example.header[binding.value.head];
          }
        })
        // 生成sortTable实例(表头拖动)
        new JSortTable(
          header,
          (evt) => {
            let headObj = null;
            if (example.header instanceof Array) {
              headObj = example.header;
            } else if (example.header instanceof Object) {
              headObj = example.header[binding.value.head];
            }
            // 原位置
            const oldIndex = headObj.findIndex(
              (item) => evt.item.innerText === item.showName
            );
            // 新位置
            const newIndex = headObj.findIndex(
              (item) => evt.newNode.innerText === item.showName
            );
            if (oldIndex !== -1 && newIndex !== -1) {
              // 交换顺序
              const temp = headObj[oldIndex];
              headObj.splice(oldIndex, 1);
              headObj.splice(newIndex, 0, temp);
              // 保存数据
              example.saveHead();
              example.$forceUpdate();
            } else {
            }
          },
          false,
          tablebody
        );
        // 生成右键事件
        if (binding.value.showMenu) {
          // contxtMenu.bind(example)
          el.addEventListener('contextmenu', function (e) {
            // 设置当前表格
            if (example.header instanceof Array) {
              example.currentHeader = example.header;
            } else if (example.header instanceof Object) {
              example.currentHeader = example.header[binding.value.head];
            }
            // 合并右键事件
            if (example.extendRightEvent instanceof Array) {
              example.rightClickMenuConfig.menulists = [
                ...example.initialRightEvent,
                ...example.extendRightEvent,
              ];
            } else if (example.extendRightEvent instanceof Object) {
              const event = example.extendRightEvent[binding.value.head];
              example.rightClickMenuConfig.menulists = [
                ...example.initialRightEvent,
              ];
              if (event)
                example.rightClickMenuConfig.menulists =
                  example.rightClickMenuConfig.menulists.concat(event);
            }
            e.preventDefault();
            example.rightClickMenuConfig.location.x = e.clientX;
            example.rightClickMenuConfig.location.y = e.clientY;
            example.rightClickMenuConfig.showRightClickMenu = true;
          });
        }
      },
    });
  },
};
export default draghead;
